<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <table style="height: auto;">
            <thead>
                <tr>
                    <td>编号</td> 
                    <td>科目</td> 
                    <td>成绩</td> 
                    <td>操作</td> 
                </tr>
            </thead>
            <tbody v-if="list.length > 0">
                    <tr v-for="(el,index) in list">
                    <td >{{index + 1}}</td> 
                    <td >{{el.subject}}</td> 
                    <td  :class="{co:el.score<60}">{{el.score}}</td> 
                    <td><a @click.prevent="del(el.id)" href="#" style="text-decoration:none;"> 删除</a></td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="4">
                        <span style="display: flex;justify-content: center;">暂无数据</span>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">总计：{{totalCount}}</td>
                    <td colspan="2">平均分: {{avgCount}}</td>
                </tr>
            </tfoot>

        </table>

            <br><hr><br>
            <div>
                科目：<input type="text" v-model.trim="subject"><br>
                分数：<input type="text" v-model.number="score">
                <input type="button" @click="add" value="添加">
            </div>

    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                list:[{id:'1',subject:'语文',score:19},
                      {id:'11',subject:'数学',score:10},
                      {id:'12',subject:'英语',score:100}],
                subject:'',
                score:'',
            },
            methods: {
                add(){
                    if(this.subject && this.score){
                        this.list.unshift({id:new Date(),subject:this.subject,score:this.score})
                    }

                    this.subject = '';
                    this.score = '';
                    
                },
                del(id){
                    this.list = this.list.filter(e => e.id != id)
                },

            },
            computed:{
                totalCount(){
                    var sum = 0;
                    if (this.list.length > 0) {
                        this.list.forEach(e => {sum += e.score});
                       
                    }
                    return  sum;
                },
                avgCount(){
                    var avg = 0;
                    if (this.list.length > 0) {
                       avg = (this.totalCount / this.list.length).toFixed(2)
                    }
                    return avg;
                }
            },
        })


    </script>
    <style>
        table {
            border-collapse: collapse;
            width: 30%;
        }
        th,td {
            border: 1px solid #ddd;
        }
        .co {
            color: red;
        }
    </style>
    
</body>
</html>